import React,{ Component } from 'react';
import { 
    DetailsStyle,FooterStyle,FooterAloneStyle,FooterPostageStyle,
    FooterButtonStyle,DetailsHeadStyle,DetailsSectionStyle,
    DetailsPriceMask,DetailsGoods,DetailsContainerStyle,DetailsRuleWrap,
    DetailsFreeIcon,DetailsNav,DetailsImgStyle,DetailsShowNav,DetailsTopStyle
 } from './DetailsStyle';

import BScroll from 'better-scroll';
// import { NavLink } from 'react-router-dom';
import getStore from 'utils/get_store';
import actionCreators from 'store/tuan1/actionCreators'

class TuanDetails extends Component{

    constructor(){
        super();
        this.state = {
            price_mask_flag : false,
            navFlag:false,
            goTopFlag:false
        }
    }


    DetailsBack = () => {
        this.props.history.go(-1);
    }

    componentDidMount(){
        this.scroll = new BScroll( this.box,{
            scrollY: true,
            probeType:1,
            mouseWheel: {
                speed: 10,
                invert: false,
                easeTime: 300
            },
            click: true
        })

        this.scroll.on("scroll",function(e){
            if(e.y<-785){
                if( !this.state.navFlag ){
                    this.setState({
                        navFlag:true
                    })
                }
                
            }
            if( e.y>-785 ){
                this.setState({
                    navFlag:false
                })
            }
            if( e.y>-1000 ){
                this.setState({
                    goTopFlag:false
                })
            }
            if( e.y<-1000 ){
                this.setState({
                    goTopFlag:true
                })
            }
            // console.log(e);
        }.bind(this))


        const id = this.props.location.pathname.slice(13);
        this.props.getDetailsData(id);


    }

    removeMaskPrice = () => {
        this.setState({
            price_mask_flag:false
        })
    }
    showMaskPrice = () => {
        this.setState({
            price_mask_flag:true
        })
    }

    goTop = () => {
        this.scroll.scrollTo(0,0,1000);
    }

    render () {
        const { ...data } = ( this.props.data && this.props.data );
        // console.log('data',data);
        return (
            <DetailsStyle>
                <DetailsHeadStyle ref={ el => this.box = el }>
                    <DetailsContainerStyle>
                        <DetailsSectionStyle className="goods-box">
                            <div className="goods-img">
                                <a>
                                    <img src="http://mp6.jmstatic.com/product/002/208/2208425_std/2208425_1000_1000.jpg?v=1456391693&amp;imageView2/2/w/640/q/90" alt=""/>
                                    {/* <img src={this.props.data.buy_alone.image_url_set.dx_image[640]} alt=""/> */}
                                </a>
                            </div>
                            <div className="goods-price-msg bg-f">
                                <div className= "tuan-alone">
                                    <p className="tuan-price">
                                        {/* <b> ￥34 </b> */}
                                        <b> {data.group_jumei_price} </b>
                                        <strong>包邮</strong>
                                    </p>
                                    <p className="del-price"><span>单买价¥39</span></p>
                                    <p className="tuan_number">已有41人参与</p>
                                </div>
                                <div id="price-details-box">
                                    <p className="price-details-box">
                                        &nbsp;<span className="price-details">价格详情</span>
                                        <i onClick = { this.showMaskPrice } className= "fa fa-question-circle-o"></i>
                                    </p>
                                </div>
                                <div id="countDown" className="surplus_time_pack">
                                    <div className="end-time detail_down_time">
                                        <div id="timeWrap" className="font-14 count-down jscount-down">
                                            还剩2天
                                        </div>
                                    </div>
                                    <span className="refund_msg">逾期未成团自动退款</span>
                                </div>
                            </div>
                        </DetailsSectionStyle>
                        <DetailsGoods className="goods-msg bg-f mb-10">
                            <div className="goods-text-box">
                                <span className="goods-num">[2人团]</span>
                                雪花秀 顺行洁颜卸妆油中样50ml，轻松卸除彩妆。
                            </div>
                        </DetailsGoods>
                        <DetailsRuleWrap id="ruleWrap">
                            <h3 className="course-title">
                                拼团玩法
                                <a className="course-rule" href="http://s.h5.jumei.com/yiqituan/rules?type=">
                                    查看规则   >
                                </a>
                            </h3>
                            <div className="course-wrap">
                                <div className="course-item course-itemon">
                                    支付<br />开团/参团
                                </div>
                                    <span className="fa fa-angle-right"></span>
                                <div className="course-item">
                                    邀请<br/>好友参团
                                </div>
                                    <span className="fa fa-angle-right"></span>
                                <div className="course-item">
                                    拼团成功立即发货<br/>逾期未成团自动退款
                                </div>
                            </div>
                        </DetailsRuleWrap>

                        <DetailsFreeIcon id="freeIcon">
                            <div className="detail_info_item clear">
                                <a className="commit_icon metro_1_w pull_left left" href="http://s.h5.jumei.com//product/page?label=interantion_shipping">
                                    <img src="http://mp5.jmstatic.com/mobile/other/detail_page_guarantee/interantion_shipping.png?imageView2/2/w/51/q/90" alt=""/>
                                    <div>海外直采</div>
                                </a>
                                <a className="commit_icon metro_1_w pull_left left" href="http://s.h5.jumei.com//product/page?label=genuine_guarantee">
                                    <img src="http://mp5.jmstatic.com/mobile/other/detail_page_guarantee/genuine_guarantee.png?imageView2/2/w/51/q/90" alt=""/>
                                    <div>原装正品</div>
                                </a>
                                <a className="commit_icon metro_1_w pull_left left" href="http://s.h5.jumei.com//product/page?label=global_delivery">
                                    <img src="http://mp5.jmstatic.com/mobile/other/detail_page_guarantee/global_delivery.png?imageView2/2/w/51/q/90" alt=""/>
                                    <div>最快次日达</div>
                                </a>
                                <a className="commit_icon metro_1_w pull_left left" href="http://s.h5.jumei.com//product/page?label=return_guarantee_7">
                                    <img src="http://mp6.jmstatic.com/mobile/other/detail_page_guarantee/return_guarantee_7.png?imageView2/2/w/51/q/90" alt=""/>
                                    <div>7天退货</div>
                                </a>
                            </div>
                        </DetailsFreeIcon>
                        <DetailsNav>
                            <div className="tab-box">
                                <ul className="tuwen-tab color6 tac fs13 bd-bottom bgc-f">
                                    <li className="pr cur">
                                        图文详情<span className="pa"></span>
                                    </li> 
                                    <li className="pr">
                                        商品参数<span className="pa"></span>
                                    </li>
                                    <li className="pr">
                                        评价<span className="pa"></span>
                                    </li>
                                </ul>
                            </div>
                        </DetailsNav>
                        
                        <DetailsImgStyle>
                            <img src="http://p12.jmstatic.com/html_editor/201904/16/15553809523570.jpg" alt=""/>
                            <img src="http://p12.jmstatic.com/html_editor/201610/26/14774487308518.jpg" alt=""/>
                            <img src="http://p12.jmstatic.com/html_editor/201803/13/15209180463321.jpg" alt=""/>
                            <img src="http://p12.jmstatic.com/html_editor/201610/26/14774487474363.jpg" alt=""/>
                            <img src="http://p12.jmstatic.com/html_editor/201610/26/14774487545945.jpg" alt=""/>
                            <img src="http://p12.jmstatic.com/html_editor/201610/26/14774487702721.jpg" alt=""/>
                            <img src="http://p12.jmstatic.com/html_editor/201803/13/15209180902573.jpg" alt=""/>
                            <img src="http://p12.jmstatic.com/html_editor/201804/23/15244522276282.jpg" alt=""/>
                            <img src="http://p12.jmstatic.com/html_editor/201710/26/15089843568808.jpg" alt=""/>
                            <img src="http://p12.jmstatic.com/html_editor/201701/06/14836882914977.gif" alt=""/>                    
                            <img src="http://p12.jmstatic.com/html_editor/201610/26/14774487726271.jpg" alt=""/>
                            <img src="http://p12.jmstatic.com/html_editor/201610/26/14774487731666.jpg" alt=""/>
                        </DetailsImgStyle>

                    </DetailsContainerStyle>
                </DetailsHeadStyle>

                {this.state.navFlag && <DetailsShowNav>
                            <div className="tab-box">
                                <ul className="tuwen-tab color6 tac fs13 bd-bottom bgc-f">
                                    <li className="pr cur">
                                        图文详情<span className="pa"></span>
                                    </li> 
                                    <li className="pr">
                                        商品参数<span className="pa"></span>
                                    </li>
                                    <li className="pr">
                                        评价<span className="pa"></span>
                                    </li>
                                </ul>
                            </div>
                </DetailsShowNav>}

                { this.state.price_mask_flag && <DetailsPriceMask>
                    <div className= "price-mask-outer"  onClick = { this.removeMaskPrice }>
                        <div className= "price-mask-content">
                            <div className ="price-mask-details">
                                <h3>价格详情</h3>
                                <i className = "fa fa-times-circle-o"></i>
                            </div>
                            <div className ="price-content">
                                货价 31.99 + 税价 2.91（增值税、消费税）
                            </div>
                        </div>
                    </div>
                </DetailsPriceMask>}

               {this.state.goTopFlag && <DetailsTopStyle onClick = { this.goTop }>
                    <i className = "fa fa-angle-up"></i>
               </DetailsTopStyle>}

                <FooterStyle>
                    <i className= "fa fa-arrow-circle-left" onClick = { this.DetailsBack }></i>
                    <FooterButtonStyle>
                        <FooterAloneStyle>
                            <i>¥39</i>
                            <span>单独买</span>
                        </FooterAloneStyle>
                        <FooterPostageStyle>
                            {/* <i>{this.props.data.group_jumei_price}</i> */}
                            <i>￥34</i>
                            <span>包邮开团</span>
                        </FooterPostageStyle>
                    </FooterButtonStyle>
                </FooterStyle>
            </DetailsStyle>
        )
    }


    componentDidUpdate(){
        // console.log(this.props.data);
    }

}

export default getStore({
    actionCreators,
    UIComponent: TuanDetails,
    type: 'tuan1'
  });